<template>
    <div class="down-page">
        <div v-if="topOpt" class="down-top-opt"></div>
        <div v-else class="downbox">
            <div class="downbg" :class="bg"></div>
            <div class="mark-wrap" v-show="mark">
                <div class="info-wrap">
                    <img src="../../assets/image/logo.png" alt="" class="img-logo">
                    <div class="app-name">•华汇换币•</div>
                    <div class="slogan">换·个·角·度·看·世·界</div>
                </div>
                <div class="downcode">
                    <canvas ref="qrcodeios" style="display: block;"></canvas>
                </div>
                <div class="download-wrap">
                    <a class="btn ios" v-if="isIOS" :href="`${down}/huahui.mobileconfig?url=${new Date().getTime()}`">IOS 下载</a>
                    <a class="btn android" v-else :href="`${down}/huahui.6080er.com_0715221725.apk?url=${new Date().getTime()}`">Android 下载</a>
                </div>

                <div class="tutorial-go" @click="mark = false">
                    IOS / Android 安装教程&gt;
                </div>

                <div class="warn">本APP含有成人内容，禁止18岁以下用户访问！</div>
            </div>
            <div class="tutorial-wrap" v-show="!mark">
                <div class="title color-red"><button type="button" class="back" @click="mark = true"><i class="cubeic-back"></i></button> 安装教学</div>
                <div class="q1 color-red">Q：ios 如何安装？</div>
                <div class="tab-pane mc-install-step">
                    <p>1、同意安装后，将自动在桌面开始安装，成功后可以在桌面看到应用「XX」，如下图：</p>
                    <div class="iosimg" style="margin:5px 0">
                        <img src="../../assets/image/ios01.jpg" alt="">
                        <img src="../../assets/image/ios02.jpg" alt="">
                        <img src="../../assets/image/ios03.jpg" alt="">
                        <img src="../../assets/image/logo.png" alt="">
                    </div>
                    <p>2、安装成功后，在手机里找到「设置」—「通用」—「设备管理」—「XX」 ，再点击「信任 XX.」即可使用App。</p>
                </div>
                <div class="q1 color-red">Q：Android 如何安装？</div>
                <div class="tab-pane mc-install-step">
                    <p class="install-type-content">1.【设定／设置】&gt;【安全性】</p>
                    <p class="install-type-content">2.开启【不明的来源】，并执行【确定】</p>
                </div>
            </div>
        </div>
        
    </div>
</template>

<style lang="stylus">
.down-page{
    width 100%
    max-width 640px
    margin 0 auto
    height 100%
    font-family "Microsoft Yahei"
    .downbox{
        width 100%
        height 100%
    }
    .downbg{
        width 100%
        height 100%
        background-repeat no-repeat
        background-size cover
        background-position center
        overflow hidden
        background-image url(../../assets/image/downbg.jpg)
    }
    .mark-wrap{
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 999;
        background: rgba(0, 0, 0, 0.5);
        transition: all 0.5s ease-in;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        display: flex;
        flex-direction: column;
        opacity: 1;
        .info-wrap{
            top: 0;
            margin-top: 0;
            height: auto;
            position relative
            margin: 0 auto;
            text-align: center;  
            color #fff 
            margin-bottom 20px
            .img-logo{
                width: 80px;
                animation: bounce-in-left 0.6s both;
                border-radius 10px
            }
            .app-name {
                margin:10px 0 15px 0;
                font-size: 16px;
                letter-spacing: 15px;
                animation: slide-in-blurred-left 1s both;
                font-weight 600
            }
            .slogan {
                font-size: 14px;
                letter-spacing: 10px;
                animation: slide-in-blurred-left 1.4s both;
            }
        }
        .downcode{
            padding 10px
            background #fff
        }
        .download-wrap {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: center;
            margin-top: 50px;
            .btn {
                margin: 0 auto;
                width:150px;
                height: 40px;
                line-height: 40px;
                border-radius: 50px;
                background: rgba(255, 255, 255, 0.4);
                font-size: 14px;
                animation: slide-in-bottom 1.8s both;
                text-align: center;
                color #fff
                &.android {
                    margin-right: 10px;
                    animation: slide-in-bottom 1.7s both;
                }
                &.ios {
                    animation: slide-in-bottom 1.8s both;
                }
            }
        }
        .tutorial-go {
            color: #ffae00;
            margin: 20px 0;
            font-size 14px
        }
        .warn {
            position: absolute;
            bottom: 10px;
            left: 0;
            right: 0;
            font-size: 12px;
            text-align: center;
            opacity: .3;
        }
    }
    .tutorial-wrap{
        display: block;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(0, 0, 0, 0.5);
        padding: .3rem;
        font-size: .28rem;
        overflow-y: auto;
        color #fff
        .title {
            font-size: 16px;
            border-bottom: 2px solid #FFF;
            padding-bottom: 2px;
            font-weight: bold;
            height 40px
            line-height 36px
            color #ffae00
            text-align center
            .back {
                width: 40px;
                height 40px
                position absolute
                top 0
                left 0
                font-size 24px
                color #fff
                background transparent
                border 0
                text-align center
            }
        }
        .q1 {
            margin: 15px 0;
            font-size: 16px;
            color #ffae00
            text-align left
        }
        .tab-pane{
            text-align left
            line-height 25px
            font-size 14px
            .iosimg{
                display flex
                img{
                    display block
                    width 70px
                    height 70px
                    margin-right 10px
                }
            }
        }
    }
    .down-top-opt{
        position absolute
        top 0
        left 0
        background url(../../assets/image/share-down.png) no-repeat center;
        background-size cover
        width 100%
        height 100%
        z-index 9999
    }
@keyframes bounce-in-left {
  0% {
    -webkit-transform: translateX(-600px);
    transform: translateX(-600px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }
  38% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
    opacity: 1;
  }
  55% {
    -webkit-transform: translateX(-68px);
    transform: translateX(-68px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  72% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  81% {
    -webkit-transform: translateX(-28px);
    transform: translateX(-28px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  90% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  95% {
    -webkit-transform: translateX(-8px);
    transform: translateX(-8px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
}
@keyframes slide-in-elliptic-right-fwd {
  0% {
    -webkit-transform: translateX(800px) rotateY(-30deg) scale(0);
    transform: translateX(800px) rotateY(-30deg) scale(0);
    -webkit-transform-origin: -100% 50%;
    transform-origin: -100% 50%;
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0) rotateY(0) scale(1);
    transform: translateX(0) rotateY(0) scale(1);
    -webkit-transform-origin: -1800px 50%;
    transform-origin: -1800px 50%;
    opacity: 1;
  }
}
@keyframes shake-horizontal {
  0%,
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  10%,
  30%,
  50%,
  70% {
    -webkit-transform: translateX(-10px);
    transform: translateX(-10px);
  }
  20%,
  40%,
  60% {
    -webkit-transform: translateX(10px);
    transform: translateX(10px);
  }
  80% {
    -webkit-transform: translateX(8px);
    transform: translateX(8px);
  }
  90% {
    -webkit-transform: translateX(-8px);
    transform: translateX(-8px);
  }
}
@keyframes slide-in-blurred-left {
  0% {
    -webkit-transform: translateX(-1000px) scaleX(2.5) scaleY(0.2);
    transform: translateX(-1000px) scaleX(2.5) scaleY(0.2);
    -webkit-transform-origin: 100% 50%;
    transform-origin: 100% 50%;
    -webkit-filter: blur(40px);
    filter: blur(40px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0) scaleY(1) scaleX(1);
    transform: translateX(0) scaleY(1) scaleX(1);
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    -webkit-filter: blur(0);
    filter: blur(0);
    opacity: 1;
  }
}
@keyframes roll-in-blurred-bottom {
  0% {
    -webkit-transform: translateY(800px) rotate(720deg);
    transform: translateY(800px) rotate(720deg);
    -webkit-filter: blur(50px);
    filter: blur(50px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0) rotate(0deg);
    transform: translateY(0) rotate(0deg);
    opacity: 1;
  }
}
@keyframes roll-in-left {
  0% {
    -webkit-transform: translateX(-800px) rotate(-540deg);
    transform: translateX(-800px) rotate(-540deg);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0) rotate(0deg);
    transform: translateX(0) rotate(0deg);
    opacity: 1;
  }
}
@keyframes slide-in-bottom {
  0% {
    -webkit-transform: translateY(1000px);
    transform: translateY(1000px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
  }
}
}
</style>


<script>
import QRious from 'qrious'
export default {
    data(){
        return {
            active: 1,
            show:1,
            topOpt:false,
            isIOS:true,
            down:'',
            bg:'down1',
            mark:true,
            downurl:''
        }
    },
    created(){
        
        var ua = navigator.userAgent.toLowerCase();
        var u = navigator.userAgent, app = navigator.appVersion;
        var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
        let isWeiXin = ua.match(/MicroMessenger/i) == 'micromessenger';
        let isQQ = ua.indexOf(' qq/') > -1;
        if(isWeiXin || isQQ){
              this.topOpt = true;
          }
        if (isIOS) {
            this.isIOS = true;
    　　　　//这个是ios操作系统
        }else{
            this.isIOS = false
        }
    },
    mounted(){
        this.down = window.location.origin
        this.initios()
        
    },
    computed:{

    },
    methods:{
        initios() {
            // if(this.isIOS){
            //     this.downurl = `${this.down}/huahui.mobileconfig?url=${new Date().getTime()}`
            // }else{
            //     this.downurl = `${this.down}/down`
            // }
            new QRious({
                element: this.$refs.qrcodeios,
                size: 100,
                value: `${this.down}/down`
            });
        },
        getQueryString(name) { 
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i"); 
            var r = window.location.search.substr(1).match(reg); 
            if (r != null) return unescape(r[2]); 
            return null; 
        } 
    }
}
</script>
